<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米有品</title>
    <link rel=icon href="../img/favicon_yp.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>

<body>
    <section class="app">
        <header class="header">
            <div class="title">
                <div class="logo"><img class="logo-img" src="../img/index_logo.png" alt=""></div>
                <div class="search">
                    <img class="search-img" src="../img/search.png" alt="">
                    <input type="text" id="keywords" placeholder="搜一搜">
                </div>
            </div>
        </header>
        <main class="content">
            <div class="wapper">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img class="focus-item-img" src="../img/banner0.jpeg">
                        </div>
                        <div class="swiper-slide">
                            <img class="focus-item-img" src="../img/banner1.jpeg">
                        </div>
                        <div class="swiper-slide">
                            <img class="focus-item-img" src="../img/banner2.jpeg">
                        </div>
                        <div class="swiper-slide">
                            <img class="focus-item-img" src="../img/banner3.jpeg">
                        </div>
                        <div class="swiper-slide">
                            <img class="focus-item-img" src="../img/banner4.jpeg">
                        </div>
                        <div class="swiper-slide">
                            <img class="focus-item-img" src="../img/banner5.jpeg">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="title">
                <div class="item">
                    <div class="item-icon"><img src="../img/sxjx.png"></div>
                    <div class="item-info">上新精选</div>
                </div>
                <div class="item">
                    <div class="item-icon"><img src="../img/xmzc.png"></div>
                    <div class="item-info">小米众筹</div>
                </div>
                <div class="item">
                    <div class="item-icon"><img src="../img/ypms.png"></div>
                    <div class="item-info">有品秒杀</div>
                </div>
                <div class="item">
                    <div class="item-icon"><img src="../img/ypsh.png"></div>
                    <div class="item-info">有品生活+</div>
                </div>
                <div class="item">
                    <div class="item-icon"><img src="../img/xmzy.png"></div>
                    <div class="item-info">小米自营</div>
                </div>
            </div>
            <div class="banner"><img src="../img/banner.gif" alt=""></div>
            <div class="shoplist">
                <div class="item" goods-id="4">
                    <div class="goods-img">
                        <img src="../img/goods1.png" alt="">
                    </div>
                    <div class="goods-name">全智能独立通话手表 | TicWatch Pro3旗舰版</div>
                    <div class="goods-poster">eSIM独立通话 高通4100芯片 血氧检测 NFC支付门禁</div>
                    <div class="goods-pirce">
                        <span class="new-price"><i>&yen;</i>2199</span>
                        <span class="old-price"><i>&yen;</i>2298</span>
                    </div>
                    <div class="goods-type"><span class="type">精选</span></div>
                </div><div class="item" goods-id="4">
                    <div class="goods-img">
                        <img src="../img/goods2.png" alt="">
                    </div>
                    <div class="goods-name">魔兽世界联名款</div>
                    <div class="goods-poster">魔兽世界限量联名款</div>
                    <div class="goods-pirce">
                        <span class="new-price"><i>&yen;</i>3130</span>
                        <span class="old-price"><i>&yen;</i>3199</span>
                    </div>
                    <div class="goods-type"><span class="type">精选</span></div>
                </div>
            </div>
            <div class="line"></div>
        </main>
        <footer class="footer">
            <div class="title">
                <div class="item active">
                    <div class="item-icon sy"><img src="../img/bottom.png" alt=""></div>
                    <div class="item-info">首页</div>
                </div>
                <div class="item" data-href="./index.html">
                    <div class="item-icon fl"><img src="../img/bottom.png" alt=""></div>
                    <div class="item-info">分类</div>
                </div>
                <div class="item" data-href="./cart.html">
                    <div class="item-icon gwc"><img src="../img/bottom.png" alt=""></div>
                    <div class="item-info">购物车</div>
                </div>
                <div class="item" data-href="./ucenter.html">
                    <div class="item-icon gr"><img src="../img/bottom.png" alt=""></div>
                    <div class="item-info">个人</div>
                </div>
            </div>
        </footer>
    </section>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/jquery.lazyload.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>